<template>
	<view class="play-list-board " :class="isShow ? 'active' : ''">
		<!-- 功能区域 start  -->
		<Header :title="title" @close="close"></Header>

		<!-- 功能区域 end -->

		<!-- 列表区域 start -->
		<scroll-view class="scroll-board" scroll-y="true" enable-flex="true">
			<!-- 通用列表 start -->
			    <view
			      v-if="mode === 'currency'"
			      :class="hasTabBar ? 'active' : ''" 
				  class="play-list-item "
				  v-for="(item,index) in lists"
			      :key="index"
			      data-type="single"
			       :data-action="index"
			      @click="click"
			    >
			      <view :class="curIdx === index ? 'title active' : 'title'">{{ item.title }}</view>
			      <view class="author">{{ item.author }}</view>
			    </view>
			<!-- 通用列表 end -->

			<!-- 图文列表 start -->
			<!-- <block>
				<view class="mode">主题</view>
				<view class="play-list-item" @click="click">
					<view class="cover-img"><image class="img" src="" /></view>
					<view class="desc">
						<view class="title ellipsis">title</view>
						<view class="tags">tags</view>
					</view>
				</view>
				<view class="mode">单曲</view>
				<view class="play-list-item " @click="click">
					<view class="title">title</view>
					<view class="author">author</view>
				</view>

			</block> -->
			<!-- 图文列表 end -->

			<!-- 无数据 start -->
			<view v-else class="no-data">暂无数据</view>
			<!-- 无数据 end -->
		</scroll-view>
		<!-- 列表区域 end -->
	</view>
</template>

<script>
	import Header from '../../component/playlist/header/header.vue'
	import tools from '../../utils/tools.js'
	/**
	 * @constant {object} - 播放列表类型
	 */
	const PLAYLIST_MODE = {
	  CURRENCY: 'currency',
	  BLEND: 'blend'
	}
export default {
	props: {
		isShow: {
			type: [Boolean, String],
			default: false
		},
		title: {
			type: String
		},
		mode: {
			type: String,
			default: PLAYLIST_MODE.CURRENCY
		},
		lists: {
			type: Array,
			default: null
		},
		collect: {
			type: Object,
			default: null
		},
		curIdx: {
			type: Number,
			default: 0
		},
		hasTabBar: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			
		};
	},
	components:{
		Header
	},
	  methods: {
	    /**
	     * @description 关闭播放列表
	     * @returns {void}
	     */
	    close (e) {

	      const { action } = e;
	
	      this.$emit('close', { action });
	    },
	
	    /**
	     * @description 点击事件处理函数
	     * @param {object} e - 事件源
	     * @returns {void} 
	     */
	    click (e) {
			console.log(e);
	      const { type, action } = tools.getEventDetail(e),
	            { mode, lists, collect } = this.$props;
				console.log(type, action);
				console.log(mode, lists, collect);
	
	      const item = mode === PLAYLIST_MODE.CURRENCY 
	                        ? lists[action]
	                        : collect[type][action];
	
	      this.$emit('click', {
	        action: type,
	        data: Object.assign({
	          index: action
	        }, item)
	      })
	    }
	  }
};
</script>

<style lang="scss">
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.play-list-board {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0%;
	background-color: #03174c;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	z-index: 99;
	overflow: hidden;
	transition: all 0.5s ease;
}

.play-list-board.active {
	height: 65%;
}

.play-list-board .scroll-board {
	width: 100%;
	height: calc(100% - 120rpx);
}

.play-list-board .mode {
	width: 100%;
	padding: 10rpx 50rpx;
	font-size: 32rpx;
	color: #e6e7f2;
	box-sizing: border-box;
}

.play-list-board .play-list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 630rpx;
	height: 112rpx;
	margin: 40rpx 60rpx;
}

.play-list-board .play-list-item:first-child {
	margin-top: 20rpx;
}

.play-list-board .play-list-item:last-child {
	margin-bottom: 80rpx;
}

.play-list-board .play-list-item.active:last-child {
	margin-bottom: 220rpx;
}

.play-list-board .play-list-item .cover-img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 138rpx;
	height: 100%;
}

.play-list-board .play-list-item .cover-img .img {
	width: 100%;
	height: 100%;
}

.play-list-board .play-list-item .desc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 112rpx;
	padding-left: 160rpx;
	box-sizing: border-box;
}

.play-list-board .play-list-item .title {
	line-height: 60rpx;
	font-size: 34rpx;
	color: #e6e7f2;
}

.play-list-board .play-list-item .author,
.play-list-board .play-list-item .tags {
	font-size: 24rpx;
	color: #98a1bd;
}

.play-list-board .play-list-item .title.active {
	color: #8e97fd;
}

.play-list-board .scroll-board .no-data {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70%;
	color: #98a1bd;
}
</style>
